﻿@Scripts.Render("https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBW-tAI5fYfORgGNNVmtXoQthz3YDxl1C4&sensor=false&libraries=places")	
@Scripts.Render("~/Scripts/skel.min.js")
@Scripts.Render("~/Scripts/jquery.dropotron.min.js")
@Scripts.Render("~/Scripts/helios.js") 
 <script type="text/javascript"	src="http://slideshow.triptracker.net/slide.js"></script>     
      <script>
          var currentPlace;
	      function initialize() {

	          
	          var reference = $("#reference").text();
	          var request = {
	              reference: reference
	          };
	          var map = new google.maps.Map(document.getElementById('map-canvas'), {
	              
	          });
	          var infowindow = new google.maps.InfoWindow();
	          var service = new google.maps.places.PlacesService(map);

	          

	          service.getDetails(request, function (place, status) {
	              if (status == google.maps.places.PlacesServiceStatus.OK) {

	                  map.setCenter(place.geometry.location);
	                  map.setZoom(15);  

	                  var marker = new google.maps.Marker({
	                      map: map,
	                      position: place.geometry.location
	                  });

	                  currentPlace = place;
	                  populateControls(currentPlace);

	                  google.maps.event.addListener(marker, 'click', function () {
	                      infowindow.setContent(place.name + place.rating + place.formated_address);
	                      infowindow.open(map, this);
	                  });
	              }
	          });
	      }

	      function populateControls(currentPlace) {
          
          $("#title").text(currentPlace.name);
          $("#icon").attr('src', currentPlace.icon);
          $("#address").text(currentPlace.formatted_address);
          $("#formatted_phone").text(currentPlace.formatted_phone_number);
          $("#types").text("Types" + currentPlace.types);
          $("#rating").text("Rating " + currentPlace.rating);
          //$("#opening").text(currentPlace.opening_hours.periods[0].open.day);


          if (currentPlace.reviews) {
              //$("#image").attr('src', currentPlace.photos[0].getUrl({ 'maxWidth': 900, 'maxHeight': 900 }))
              var reviewDiv = '<div class="para"><p class="">{0}</p><p class="top"><a href="{2}">{1}</a></p></div>';
              for (i = 0; i < currentPlace.reviews.length; i++) {
                  var review = reviewDiv.replace("{0}", currentPlace.reviews[i].text);
                  var review = review.replace("{1}", currentPlace.reviews[i].author_name);
                  var review = review.replace("{2}", currentPlace.reviews[i].author_url);
                  $("#reviews").append(review)              
              }
          }

          if (currentPlace.photos) {
              var photoDiv = '<article>	<a href="{0}" class="image featured"><img src="{0}" alt="" /></a> </article>';
              for (i = 0; i < currentPlace.reviews.length; i++) {
                  var photo = photoDiv.replace("{0}", currentPlace.photos[i].getUrl({ 'maxWidth': currentPlace.photos[i].width, 'maxHeight': currentPlace.photos[i].height }));
                  var photo = photo.replace("{0}", currentPlace.photos[i].getUrl({ 'maxWidth': 200, 'maxHeight': 200 }));
                  $(".reel").append(photo);
              }
          }

      }

      function addPlaceToTrip() {

          var place = Object();
          place.Name = currentPlace.name;
          place.Reference = currentPlace.reference;
          place.Lat = currentPlace.geometry.location.d;
          place.Long = currentPlace.geometry.location.e;
          if (currentPlace.photos) {
              place.Pictures = currentPlace.photos[0].getUrl({ 'maxWidth': 200, 'maxHeight': 200 })
          }
          place.Icon = currentPlace.icon;
         
         // alert(place.Pictures);
         //alert(place.Favorite);
          $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "http://localhost:58872/Trip/AddPlaceToTrip",
              data: JSON.stringify(place),
              dataType: "json",
              success: function (data) {
                  if (data.Error) {
                      alert(data.Error)
                  } else {
                      //location.reload(true);
                      alert("ok");
                  }
              },
              error: function (result) {
                  alert("error");
              }
          });

      }

	      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    


   <div class="content_bottom" >

		<!-- start sidebar_left   ---->
		<div class="sidebar_left">    
        <div class="content_btm2">
					<div class="content_btm2_grid" align="left">
						<h2>Users</h2>
					<!-- 	<p>just select your favorite social network to get started</p> -->
					</div>
					<ul class="nav6">
						<li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/profile-pic.png"></i></a></li>
						<li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/profile-pic.png"></a> </li>
						<li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/profile-pic.png"> </a> </li>
						<li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/profile-pic.png"></i></a> </li>
                        <li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/profile-pic.png"></i></a><p></p></li>
						<li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/profile-pic.png"></a> </li>
						<li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/profile-pic.png"> </a> </li>
						<li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/profile-pic.png"></i></a> </li>
						<div class="clear"></div>
					</ul>
				</div>	
		@*<div class="grid_1_of_1">
            <ul class="nav3">
				<li><a class="facebook" href=""> <i class="facebook"></i><span>Facebook</span></a></li>
				<li class="active"><a class="twitter" href=""><i class="twitter"></i><span>Twitter</span></a></li>
				<li><a class="google" href=""><i class="google"></i><span>Google+</span></a></li>
				<li><a class="rss" href=""><i class="rss"></i><span>Rss Feeds</span></a></li>
				<li><a class="pinterest" href=""><i class="pinterest"></i><span>Pinterest</span></a></li>
				<div class="clear"></div>
			 </ul>
          </div>*@
        
			<div  class="grid_1_of_1">
				<div class="grid_1_of_1_text" id = "reviews">
					<h9 class="left">Users reviews</h9>
					<div class="right">
						<i class="tick-arrow"> </i>
					</div>                           
					<div class="clear"></div>
				</div>	
			</div>
		</div>
		<!-- end sidebar_left   ---->
		<!-- start sidebar_right   ---->
		<div class="sidebar_right">
        
			<div class="span_1_of_3">
			    <img id="image" alt="" src="">
				<div class="span_1_of_3_grid" align="left">
					<div class="grid_left1">
						<div class="article">
							<i class="article-icon"> </i>
						</div>
					</div>
					<div class="span_1_of_3_text">
						<h3><img  id ="icon" width="30px;height:20px" src=""></img> <a id="title" href="#"></a></h3>
                        <div  id="map-canvas" style ="width:100%; height:300px; margin-top:10px; "> <div><h10><u>Contact Information</u></h10>
                        <h3 style= "color:Gray; font-size:18px;"> Address: <a id="address" href="#" style= "font-size:14px;" ></a></h3>
                        <h3 style= "color:Gray; font-size:18px">Phone: <a id="formatted_phone" href="#" style= "font-size:14px;" ></a></h3>
                       <!-- <h3 style= "color:Gray; font-size:18px;">Open:<a id="opening" href="#"  style= "font-size:14px;" ></a></h3> -->
                        <h3 style= "color:Gray; font-size:18px;">Type:<a id="types" href="#"  style= "font-size:14px;"></a></h3>
                       </div> </div>
                   
                      
                        <p></p>

						
                         <ul class="span_1_of_3_nav" style = "margin-right:30px;">
                                <li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/icon_star.png"><span  id="rating"></span></a></li>
								<!--<li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/icon-rating-negative.gif"></i><span>6 Likes</span></a></li>-->
								<li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/icon-rating-positive.gif"></i><span>3 Likes</span></a></li>
								<li><a href=""><img style="width:50px; height:50px;" alt="" src="../../Images/comment_icon.png"></i><span>21 Comments</span></a></li>
								<div class="clear"></div>
						</ul>
                        <h10><u>Contact Information</u></h10>
                        <h3 style= "color:Gray; font-size:18px;"> Address: <a id="address" href="#" style= "font-size:14px;" ></a></h3>
                        <h3 style= "color:Gray; font-size:18px">Phone: <a id="formatted_phone" href="#" style= "font-size:14px;" ></a></h3>
                       <!-- <h3 style= "color:Gray; font-size:18px;">Open:<a id="opening" href="#"  style= "font-size:14px;" ></a></h3> -->
                        <h3 style= "color:Gray; font-size:18px;">Type:<a id="types" href="#"  style= "font-size:14px;"></a></h3>
                

                      
                     
                        <ul class="span_1_of_3_nav">
						<!--	<li><a href=""><i class="share_icon"></i><span  id="rating">569 Shares</span></a></li>-->
							<li>
                                <div class="widget bg1">
						            <ul class="nav4">
							            <li class="right"><a  onclick="addPlaceToTrip()" style="color:White"> Add to trip <i class="plus"></i> </a></li>
							            <div class="clear"></div>
						            </ul>
					            </div>
                            </li>
                           
							<li>
                                <div class="widget bg2">
					                <ul class="nav4">
						               <li class="right"><a href=""style="color:White">BeeThere &nbsp;<i class="follow"></i> </a></li>
						            <div class="clear"></div>
					                 </ul>
				                 </div>
                            </li>
							<div class="clear"></div>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
			
            	<div class="carousel">
				<div class="reel">

				</div>
			</div>
			@*<div class="span_1_of_4">
				<div class="span_1_of_4_grid" align="left">
						<div class="grid_left1">
							<div class="quote">
								<i class="quote-icon"> </i>
							</div>
						</div>
				<div class="span_1_of_4_text">
					<h3>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 "</h3>
				</div>
				<div class="clear"></div>
			</div>*@
			</div>
			
		</div>	
		<!-- end sidebar_right   ---->
         <p id="reference" style="visibility:hidden">@ViewBag.reference</p>
		</div>
